<template>
	<van-nav-bar title="评价详情" left-text="" left-arrow @click-left="goBack" />
	<section class="aui-flexView">
		<!-- 订单详细 -->
		<section class="aui-scrollView">
			<!-- 订单状态 -->
			<div class="aui-pay-change">
				<div class="aui-flex">
					<div class="aui-flex-box">
						<h3>{{ info.status_text }}</h3>
					</div>
					<div class="aui-pay-zfb">
						<img src="/assets/images/icon-zfb.png" alt="" />
					</div>
				</div>
			</div>

			<!-- 收货地址 -->
			<div class="aui-flex">
				<div class="aui-flex-add">
					<van-image round fit :src="LoginUser.avatar" />
				</div>
				<div class="aui-flex-box">
					<h3>
						{{ info.consignee }} <em>{{ info.mobile }}</em>
					</h3>
					<p>{{ info.address_text }}</p>
				</div>
			</div>
			<div class="aui-commodity-bg" style="background: transparent">
				<div
					style="margin-bottom: 10px; background: #f5f5f5"
					v-for="item in info.proinfo"
				>
					<!-- 订单商品 -->
					<div class="aui-flex">
						<div class="aui-commodity-img">
							<img :src="item.product.thumbs_text" />
						</div>
						<div class="aui-flex-box">
							<h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
							<p>商品单价：￥{{ item.price }}</p>
							<span class="aui-barter-time">七天退换</span>
						</div>
						<div>
							<h5>￥{{ item.total }}</h5>
							<p class="aui-sml-text">X{{ item.pronum }}</p>
						</div>
					</div>
					<!-- 评价信息 -->
					<div style="padding: 15px">
						<van-rate
							v-model="item.rate"
							icon="fire"
							void-icon="fire-o"
							readonly
						/>
						<van-field
							v-model="item.comment"
							rows="2"
							autosize
							label=""
							type="textarea"
							readonly
						/>
						<van-image
							v-for="src in item.proimg_list"
							width="5rem"
							height="5rem"
							fit="cover"
							position="left"
							style="margin-right: 15px"
							:src="src"
							@click="showImagePreview([src])"
						/>
					</div>
				</div>
			</div>
		</section>
	</section>
</template>

<script setup>
	import { showImagePreview } from "vant";
	const route = useRoute();
	const { cookies } = useCookies();
	const goBack = () => {
		history.back();
	};
	const orderproid = ref(route.query.orderproid ?? 0);
	const orderid = ref(route.query.orderid ?? 0);
	const info = ref({});
	const LoginUser = reactive(cookies.get("LoginUser"));
	onBeforeMount(() => {
		getInfoData();
	});
	const getInfoData = async () => {
		let result = await Api.business.orderInfo({
			orderid: orderid.value,
			busid: LoginUser.id,
			orderproid: orderproid.value,
		});
		if (result.code == 1) {
			info.value = result.data;
		}
	};
</script>

<style scoped>
	@import url("/assets/css/info.css");
</style>